<template>
  <div id="myorder">
        <el-tabs >
          <el-tab-pane label="待支付" name="first"  @tab-click="unpaidOrderListPage">
            <!--查询的数据表-->
            <el-table :data="unpaidOrderListAry" style="width: 100%">

              <el-table-column prop="orderInfo.orderNumber" label="订单编号" width="180"></el-table-column>
<!--              <el-table-column prop="name" label="商品名称" width="180"></el-table-column>-->
              <el-table-column prop="orderInfo.totalAmount" label="总数量" width="180"></el-table-column>
              <el-table-column prop="orderInfo.totalPrice" label="总金额" width="180"></el-table-column>
              <el-table-column prop="orderInfo.createTime" label="创建时间" width="180"></el-table-column>

              <!--操作列-->
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                      size="small"
                      type="warning"
                      round
                      icon="el-icon-edit"
                      @click="viewBtn(scope.row)">查看</el-button>
                  <el-button
                      size="mini"
                      type="danger"
                      round
                      icon="el-icon-edit"
                      @click="payment(scope.index,scope.row)">去支付</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNo"
                :page-sizes="pageSizeList"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
            <!-- 查看详情框 -->
            <el-dialog title="查看详情" :visible.sync="viewVisible" >
              <el-form :model="viewForm">
                <el-form-item label="序号" :label-width="formLabelWidth">
                  <el-input v-model="viewForm.orderInfo.orderId" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="订单编号" :label-width="formLabelWidth">
                  <el-input v-model="viewForm.orderInfo.orderNumber" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="下单用户名称" :label-width="formLabelWidth">
                  <el-input v-model="viewForm.sysUsers.realName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                  <el-input v-model="viewForm.goodsInfo.name" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="总数量" :label-width="formLabelWidth">
                  <el-input v-model="viewForm.orderInfo.totalAmount" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="总金额" :label-width="formLabelWidth">
                  <el-input v-model="viewForm.orderInfo.totalPrice" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="配送标志" :label-width="formLabelWidth">
                  <el-select v-model="viewForm.orderInfo.conveyTag" :disabled="true">
                    <el-option :value="'P001-1'" label="待付款"></el-option>
                    <el-option :value="'P001-2'" label="待发货"></el-option>
                    <el-option :value="'P001-3'" label="待收货"></el-option>
                    <el-option :value="'P001-4'" label="已发货"></el-option>
                    <el-option :value="'P001-5'" label="已完成"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-dialog>
            <!-- 支付框 -->
<!--            <el-dialog title="支付订单" :visible.sync="zhifuVisible">-->
<!--              <el-table :data="zhifuAry" style="width: 100%">-->
<!--                &lt;!&ndash; 表格列 &ndash;&gt;-->
<!--                <el-table-column prop="orderId" label="序号" width="180"></el-table-column>-->
<!--                <el-table-column prop="orderNumber" label="订单编号" width="180"></el-table-column>-->
<!--                <el-table-column prop="name" label="商品名称"></el-table-column>-->
<!--                <el-table-column prop="amount" label="数量"></el-table-column>-->
<!--                <el-table-column prop="price" label="总金额"></el-table-column>-->
<!--                &lt;!&ndash; 操作列 &ndash;&gt;-->
<!--                <el-table-column label="操作">-->
<!--                  <template slot-scope="scope">-->
<!--                    <el-button size="small" type="primary" round @click="zhifu(scope.row)">支付</el-button>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--              </el-table>-->
<!--            </el-dialog>-->


<!--              <el-form :model="zhifuForm">-->
<!--                <el-form-item label="序号" :label-width="formLabelWidth">-->
<!--                  <el-input v-model="zhifuForm.orderId" :disabled="true"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="订单编号" :label-width="formLabelWidth">-->
<!--                  <el-input v-model="zhifuForm.orderNumber" :disabled="true"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="商品名称" :label-width="formLabelWidth">-->
<!--                  <el-input v-model="zhifuForm.name" :disabled="true"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="数量" :label-width="formLabelWidth">-->
<!--                  <el-input v-model="zhifuForm.amount" :disabled="true"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="总金额" :label-width="formLabelWidth">-->
<!--                  <el-input v-model="zhifuForm.price" :disabled="true"></el-input>-->
<!--                </el-form-item>-->
<!--                &lt;!&ndash;操作列&ndash;&gt;-->
<!--                <el-table-column label="操作">-->
<!--                  <template slot-scope="scope">-->
<!--                    <el-button-->
<!--                        size="small"-->
<!--                        type="primary"-->
<!--                        round-->
<!--                        icon=""-->
<!--                        @click="zhifu(scope.row)">支付</el-button>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--              </el-form>-->
          </el-tab-pane>

          <el-tab-pane label="待发货" name="second" @tab-click="awaitOrderListPage">
            <!--查询的数据表-->
            <el-table :data="awaitOrderListAry" style="width: 100%">
              <el-table-column prop="orderId" label="序号" width="180"></el-table-column>
              <el-table-column prop="orderNumber" label="订单编号" width="180"></el-table-column>
              <el-table-column prop="name" label="商品名称" width="180"></el-table-column>
              <el-table-column prop="totalAmount" label="总数量" width="180"></el-table-column>
              <el-table-column prop="totalPrice" label="总金额" width="180"></el-table-column>

              <!--操作列-->
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                      size="small"
                      type="warning"
                      round
                      icon="el-icon-edit"
                      @click="viewBtn(scope.row.orderId)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>

            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNo"
                :page-sizes="pageSizeList"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>

            <!-- 查看详情框 -->
            <el-dialog title="待发货订单" :visible.sync="viewVisible">
              <el-table :data="viewFormDetails" style="width: 100%">
                <!-- 表格列 -->
                <el-table-column prop="orderInfo.orderId" label="订单id"></el-table-column>
                <el-table-column prop="sysUsers.nickName" label="下单用户"></el-table-column>
                <el-table-column prop="orderInfo.createTime" label="日期" width="180"></el-table-column>
                <el-table-column prop="orderInfo.orderNumber" label="订单编号" width="180"></el-table-column>
                <el-table-column prop="name" label="商品名称"></el-table-column>
                <el-table-column prop="orderDetails.amount" label="数量"></el-table-column>
                <el-table-column prop="orderDetails.price" label="单价"></el-table-column>
                <el-table-column prop="orderDetails.subtotal" label="小计"></el-table-column>
              </el-table>
            </el-dialog>

          </el-tab-pane>

          <el-tab-pane label="待提货" name="third" @tab-click="awaitPickUpGoods">
            <!--查询的数据表-->
            <el-table :data="awaitPickUpGoodsAry" style="width: 100%">
              <el-table-column prop="orderId" label="序号" width="180"></el-table-column>
              <el-table-column prop="orderNumber" label="订单编号" width="180"></el-table-column>
              <el-table-column prop="name" label="商品名称" width="180"></el-table-column>
              <el-table-column prop="totalAmount" label="总数量" width="180"></el-table-column>
              <el-table-column prop="totalPrice" label="总金额" width="180"></el-table-column>
<!--              <el-table-column label="订单进度">-->
<!--                <template slot-scope="scope">-->
<!--                  <span v-if="scope.row.conveyTag== 'P001-1'">待付款</span>-->
<!--                  <span v-else-if="scope.row.conveyTag== 'P001-2'" style="color: darkorange">待发货</span>-->
<!--                  <span v-else-if="scope.row.conveyTag== 'P001-3'" style="color: blue">待收货</span>-->
<!--                  <span v-else-if="scope.row.conveyTag== 'P001-7'" style="color: blue">待提货</span>-->
<!--                  <span v-else-if="scope.row.conveyTag== 'P001-5'" style="color: green">已完成</span>-->
<!--                  <span v-else-if="scope.row.conveyTag== 'P001-6'" style="color: black">已取消</span>-->
<!--                </template>-->
<!--              </el-table-column>-->
              <!--操作列-->
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                      size="small"
                      type="warning"
                      round
                      icon="el-icon-edit"
                      @click="viewBtn(scope.row.orderId)">查看</el-button>
                  <el-button
                      size="mini"
                      type="danger"
                      round
                      icon="el-icon-edit"
                      @click="userTiHuo(scope.row)">提货</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!--分页组件-->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNo"
                :page-sizes="pageSizeList"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>

            <!-- 查看详情框 -->
            <el-dialog title="待发货订单" :visible.sync="viewVisible">
              <el-table :data="viewFormDetails" style="width: 100%">
                <!-- 表格列 -->
                <el-table-column prop="orderInfo.orderId" label="订单id"></el-table-column>
                <el-table-column prop="sysUsers.nickName" label="下单用户"></el-table-column>
                <el-table-column prop="orderInfo.createTime" label="日期" width="180"></el-table-column>
                <el-table-column prop="orderInfo.orderNumber" label="订单编号" width="180"></el-table-column>
                <el-table-column prop="name" label="商品名称"></el-table-column>
                <el-table-column prop="orderDetails.amount" label="数量"></el-table-column>
                <el-table-column prop="orderDetails.price" label="单价"></el-table-column>
                <el-table-column prop="orderDetails.subtotal" label="小计"></el-table-column>
              </el-table>
            </el-dialog>

          </el-tab-pane>

          <!--已提货-->
          <el-tab-pane label="已提货" name="force" @tab-click="pickUpGoods">
            <!--查询的数据表-->
            <el-table :data="PickUpGoodsAry" style="width: 100%">
              <el-table-column prop="orderId" label="序号" width="180"></el-table-column>
              <el-table-column prop="orderNumber" label="订单编号" width="180"></el-table-column>
              <el-table-column prop="name" label="商品名称" width="180"></el-table-column>
              <el-table-column prop="totalAmount" label="总数量" width="180"></el-table-column>
              <el-table-column prop="totalPrice" label="总金额" width="180"></el-table-column>
              <!--              <el-table-column label="订单进度">-->
              <!--                <template slot-scope="scope">-->
              <!--                  <span v-if="scope.row.conveyTag== 'P001-1'">待付款</span>-->
              <!--                  <span v-else-if="scope.row.conveyTag== 'P001-2'" style="color: darkorange">待发货</span>-->
              <!--                  <span v-else-if="scope.row.conveyTag== 'P001-3'" style="color: blue">待收货</span>-->
              <!--                  <span v-else-if="scope.row.conveyTag== 'P001-7'" style="color: blue">待提货</span>-->
              <!--                  <span v-else-if="scope.row.conveyTag== 'P001-5'" style="color: green">已完成</span>-->
              <!--                  <span v-else-if="scope.row.conveyTag== 'P001-6'" style="color: black">已取消</span>-->
              <!--                </template>-->
              <!--              </el-table-column>-->
              <!--操作列-->
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                      size="small"
                      type="warning"
                      round
                      icon="el-icon-edit"
                      @click="viewBtn(scope.row.orderId)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!--分页组件-->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNo"
                :page-sizes="pageSizeList"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>

            <!-- 查看详情框 -->
            <el-dialog title="已提货订单" :visible.sync="viewVisible">
              <el-table :data="viewFormDetails" style="width: 100%">
                <!-- 表格列 -->
                <el-table-column prop="orderInfo.orderId" label="订单id"></el-table-column>
                <el-table-column prop="sysUsers.nickName" label="下单用户"></el-table-column>
                <el-table-column prop="orderInfo.createTime" label="日期" width="180"></el-table-column>
                <el-table-column prop="orderInfo.orderNumber" label="订单编号" width="180"></el-table-column>
                <el-table-column prop="name" label="商品名称"></el-table-column>
                <el-table-column prop="orderDetails.amount" label="数量"></el-table-column>
                <el-table-column prop="orderDetails.price" label="单价"></el-table-column>
                <el-table-column prop="orderDetails.subtotal" label="小计"></el-table-column>
              </el-table>
            </el-dialog>

          </el-tab-pane>

          <el-tab-pane label="已取消" name="quxiao"></el-tab-pane>
        </el-tabs>
  </div>
</template>

<script>
export default {
  name: "myorder",
    data() {
      return {
        //用户ID
        sysUsersId:'',
        // 查看框的显示/隐藏
        viewVisible: false,
        zhifuVisible: false,
        // lable宽度
        formLabelWidth: '120px',
        // 查看对话框
        viewForm: {
          orderInfo: {},
          sysUsers: {},
          goodsInfo: {},
        },
        viewFormDetails:[],
        //支付框数据
        zhifuAry:[],
        //去支付对话框
        zhifuForm:{},
        storageCellAry:[],
        // activeName: 'second',
        awaitOrderListAry:[],
        unpaidOrderListAry:[],
        awaitPickUpGoodsAry:[],
        PickUpGoodsAry:[],
        // 当前页号
        pageNo: 1,
        // 当前页大小
        pageSize: 5,
        // 总记录数
        total: 0,
        // 页大小列表
        pageSizeList: [2, 5, 10, 20],
      }

    },
    methods:{
      // 页大小改变
      handleSizeChange(val) {
        this.pageSize = val
        this.awaitOrderListPage()
        this.unpaidOrderListPage()
        this.awaitPickUpGoods()
        this.pickUpGoods()
      },
      // 页号改变
      handleCurrentChange(val) {
        this.pageNo = val
        //重新查询
        this.awaitOrderListPage()
        this.unpaidOrderListPage()
        this.awaitPickUpGoods()
        this.pickUpGoods()
      },
      // 显示查看详情框
      async viewBtn(id) {
        const {data: res} = await this.$http.post(`orderDetails/OrderDate/${id}`);
        this.viewFormDetails = res
        console.log("待发货详情",res)
        this.viewVisible = true;
        this.total=res.total
      },
/*      //待支付订单信息
      async unpaidOrderListPage(){
        this.sysUsersId=this.$store.state.user.sysUsersId
        const {data: res} = await this.$http.post(`orderInfo/unpaidOrderListPage2/${this.sysUsersId}/${this.pageNo}/${this.pageSize}`)
        this.unpaidOrderListAry=res.rows

        this.viewForm.orderId = res.rows[0].orderInfo.orderId;
        this.viewForm.orderNumber= res.rows[0].orderInfo.orderNumber
        this.viewForm.realName= res.rows[0].sysUsers.realName
        this.viewForm.name= res.rows[0].goodsInfo.name
        this.viewForm.totalAmount= res.rows[0].orderInfo.totalAmount
        this.viewForm.orderId= res.rows[0].orderInfo.orderId
        this.viewForm.conveyTag= res.rows[0].orderInfo.conveyTag
        this.total=res.total

      },*/
      // 点击支付打开对话框
      // async payment(index, row) {
      //   // 清空数组
      //   this.zhifuAry = [];
      //   // 根据订单id(orderId)查询订单明细信息
      //   try {
      //     const { data: res } = await this.$http.post(`/orderInfo/OrderByOrderId/${row.orderId}`)
      //     // 将获取的订单详细数据赋值给zhifuAry数组
      //     this.zhifuAry.push(res)
      //     console.log("要支付的订单数据", this.zhifuAry);
      //   } catch (error) {
      //     console.error("获取订单详细信息失败:", error);
      //   }
      //   // 显示支付对话框
      //   // this.zhifuVisible = true;
      // },
      // 点击支付对话框的支付按钮(真正的支付功能)
      // async zhifu(row){
      //   console.log("id数据",this.OrderDx)
      //   const {data: res} = await this.$http.post(`/orderInfo/OrderUpdId`,this.OrderDx)
      //   //消息提示
      //   this.$message({
      //     showClose: true,
      //     message: '支付成功',
      //     type: 'success'
      //   });
      //   //再次查询
      //   this.unpaidOrderListPage()
      // },
      //待发货
      async awaitOrderListPage(){
        this.sysUsersId=this.$store.state.user.sysUsersId
        // console.log('待发货sysUsersId',this.sysUsersId)
        const {data: res} = await this.$http.post(`orderInfo/awaitOrderListPage/${this.pageNo}/${this.pageSize}/${this.sysUsersId}`)
        this.awaitOrderListAry=res.list
        // console.log("待发货",res.list)
        this.total=res.total
      },

      //待提货
      async awaitPickUpGoods(){
        this.sysUsersId=this.$store.state.user.sysUsersId
        // console.log('待提货sysUsersId',this.sysUsersId)
        const {data: res} = await this.$http.post(`orderInfo/awaitPickUpGoods/${this.pageNo}/${this.pageSize}/${this.sysUsersId}`)
        this.awaitPickUpGoodsAry=res.list
        // console.log("待提货",res.list)
        this.total=res.total
      },
      //用户提货 -----P001-5已完成
      async userTiHuo(row){
        try {
          const { data: res } = await this.$http.post(`orderInfo/userTiHuo/${row.orderId}`);
          console.log('提货订单', res);
          // 消息提示
          this.$message({
            showClose: true,
            message: '提货成功',
            type: 'success'
          });
          // 再次查询
          this.awaitPickUpGoods();
        } catch (error) {
          console.error('提货请求出错', error);
          this.$message({
            showClose: true,
            message: '提货请求出错',
            type: 'error'
          });
        }
      },
      //已提货
      async pickUpGoods(){
        this.sysUsersId=this.$store.state.user.sysUsersId
        console.log('已提货sysUsersId',this.sysUsersId)
        const {data: res} = await this.$http.post(`orderInfo/pickUpGoods/${this.pageNo}/${this.pageSize}/${this.sysUsersId}`)
        this.PickUpGoodsAry=res.list
        console.log("已提货",res.list)
        this.total=res.total
      },
    },

  created() {
    this.awaitOrderListPage()
   /* this.unpaidOrderListPage()*/
    this.awaitPickUpGoods()
    this.pickUpGoods()
  }
}
</script>

<style scoped>

</style>